import React, {Component} from "react";
import Basic from "./basic/Basic";
import Category from "./category/Category";
import Products from "./products/Products";
import {Link, Route} from 'react-router-dom';
// import axios from 'axios';
import {Button} from 'antd';
import logoImg from '../../logo.svg';
import kehuImg from '../../assets/img/kehu-min.png';
import history from '../../router/history';

class Home extends Component {
  render () {
    let {match, history} = this.props;

    let routes = [
      {pathname: 'basic', component: Basic, text: 'Basic'},
      {pathname: 'category', component: Category, text: 'Category'},
      {pathname: 'products', component: Products, text: 'Products'},
    ];

    return (
      <div className="home">
        <img src={logoImg} alt="logo" width={200}/>
        <img src={kehuImg}/>
        {routes.map((item) => (
          <Link key={item.pathname} to={`${match.url}/${item.pathname}`}>
            <Button type={'primary'}>{item.text}</Button>
          </Link>
        ))}
        <Button onClick={this.gotoTodoApp}>todo app</Button>
        <Button onClick={() => {
          history.push('/todo-mobx')
        }}>todo mobx</Button>
        <Button onClick={this.logout}>注销</Button>
        {routes.map((item) => (
          <Route key={item.pathname} path={`${match.url}/${item.pathname}`} component={item.component}/>
        ))}
      </div>
    )
  }

  logout = async (e) => {
    window.sessionStorage.removeItem('user');
    history.push('/login');
  };

  gotoTodoApp = (e) => {
    history.push('/todo-app');
  }
}

export default Home;
